{% load i18n static common %}
<div style="padding: 10px;min-height: 300px;min-width: 1000px">
  <form class="layui-form action-form" action method="post" id="{{ model_name }}_{{ action_repr }}">
        {% csrf_token %}
        <div class="layui-form-item field-import_file">
            <label class="layui-form-label" for="id_import_file">{% trans 'data_import_labelFile' %}</label>
            <div class="layui-input-inline ">
                <input type="file" name="import_file" lay-data="{accept: 'file'}" required="" id="id_import_file">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block layui-form-mid layui-word-aux">{% trans 'data_import_fileHelpTxt' %}</div>
            </div>
            <div class="layui-form-item layui-hide">
                <input  name="company_id" value="{{ request.GET.company_id }}" id="id_company_id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">{% trans 'timeInterval_field_type' %}</label>
            <div class="layui-input-inline">
                <select name="import_type" id="id_import_type"  lay-filter="change_import_type">
                    <option value="0" selected="">{% trans 'timeInterval_typeOption_normal' %}</option>
                    <option value="1">{% trans 'timeInterval_typeOption_flexible' %}</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"
                   style="width: 150px;text-align: left">{% trans 'data_import_fileTemplateDemo' %}</label>
            <div class="layui-input-inline" style="float: right">
                <a id="timetable_import_link" target="_blank" style="color: #01AAED;"
                   href="att/timeinterval/import_template/"><i
                        class="fa fa-download"></i>{% trans 'data_import_fileTemplateDownload' %}</a>
            </div>
        </div>
        <div class="layui-form-item">
            <table class="layui-hide" id="demo"></table>
        </div>
        <div class="layui-form-item" id="description_for_normal">
            <div class="layui-input-block"
                 style="margin-left: 0px;min-height: 24px;">{% trans 'data_import_description' %}</div>
            <div class="layui-input-block" style="margin-left: 20px;">
                <p>{% trans 'data_import_timeintervalImportRequired1' %}</p>
                <p>{% trans 'data_import_timeintervalImportRequired2' %}</p>
                <p>{% trans 'data_import_timeintervalImportRequired3' %}</p>
                <p>{% trans 'data_import_timeintervalImportRequired4' %}</p>
                <p>{% trans 'data_import_timeintervalImportRequired6' %}</p>
            </div>
        </div>
         <div class="layui-form-item" id="description_for_flexible">
            <div class="layui-input-block"
                 style="margin-left: 0px;min-height: 24px;">{% trans 'data_import_description' %}</div>
            <div class="layui-input-block" style="margin-left: 20px;">
                <p>{% trans 'data_import_timeintervalImportRequired1' %}</p>
                <p>{% trans 'data_import_timeintervalImportRequired2' %}</p>
                <p>{% trans 'data_import_timeintervalImportRequired3' %}</p>
                <p>{% trans 'data_import_timeintervalImportRequired4' %}</p>
                <p>{% trans 'data_import_timeintervalImportRequired5' %}</p>
                <p>{% trans 'data_import_timeintervalImportRequired7' %}</p>
            </div>
        </div>
    </form>
</div>
<script>
  layui.use('table', function () {
    var table = layui.table, form = layui.form;
    var normal_timetable = {
      elem: '#demo'
      , cols: [[
        {field: 'no', width: '5%', title: ''}
        , {field: 'alias', width: '5%', title: 'A'}
        , {field: 'in_time', width: '5%', title: 'B'}
        , {field: 'in_ahead_margin', width: '5%', title: 'C'}
        , {field: 'in_above_margin', width: '5%', title: 'D'}
        , {field: 'out_time', width: '5%', title: 'E'}
        , {field: 'out_ahead_margin', width: '5%', title: 'F'}
        , {field: 'out_above_margin', width: '5%', title: 'G'}
        , {field: 'work_day', width: '5%', title: 'H'}
        , {field: 'early_in', width: '5%', title: 'I'}
        , {field: 'min_early_in', width: '5%', title: 'J'}
        , {field: 'late_out', width: '5%', title: 'K'}
        , {field: 'min_late_out', width: '5%', title: 'L'}
        , {field: 'in_required', width: '5%', title: 'M'}
        , {field: 'out_required', width: '5%', title: 'N'}
        , {field: 'allow_late', width: '5%', title: 'O'}
        , {field: 'allow_leave_early', width: '5%', title: 'P'}
      ]]
      , data: [{
        "no": "1"
        , "alias": "{% trans 'timeInterval_field_alias' %}"
        , "in_time": "{% trans 'timeInterval_field_checkIn' %}"
        , "in_ahead_margin": "{% trans 'timeInterval_field_checkInStart' %}"
        , "in_above_margin": "{% trans 'timeInterval_field_checkInEnd' %}"
        , "out_time": "{% trans 'timeInterval_field_checkOut' %}"
        , "out_ahead_margin": "{% trans 'timeInterval_field_checkOutStart' %}"
        , "out_above_margin": "{% trans 'timeInterval_field_checkOutEnd' %}"
        , "work_day": "{% trans 'timeInterval_field_paidDay' %}"
        , "early_in": "{% trans 'timeInterval_field_earlyIn' %}"
        , "min_early_in": "{% trans 'timeInterval_field_minEarlyIn' %}"
        , "late_out": "{% trans 'timeInterval_field_lateOut' %}"
        , "min_late_out": "{% trans 'timeInterval_field_minLateOut' %}"
        , "in_required": "{% trans 'timeInterval_field_inRequired' %}"
        , "out_required": "{% trans 'timeInterval_field_outRequired' %}"
        , "allow_late": "{% trans 'timeInterval_field_allowLate' %}"
        , "allow_leave_early": "{% trans 'timeInterval_field_allowLeaveEarly' %}"
      }, {
        "no": "2"
       , "alias": "CDMX timetable 1"
        , "in_time": "09:00:00"
        , "in_ahead_margin": "08:00:00"
        , "in_above_margin": "10:00:00"
        , "out_time": "18:00:00"
        , "out_ahead_margin": "17:00:00"
        , "out_above_margin": "19:00:00"
        , "work_day": "1"
        , "early_in": "1"
        , "min_early_in": "60"
        , "late_out": "1"
        , "min_late_out": "20"
        , "in_required": "1"
        , "out_required": "1"
        , "allow_late": "0"
        , "allow_leave_early": "0"
      }, {
        "no": "3"
        , "alias": "CDMX timetable 2"
        , "in_time": "09:30:00"
        , "in_ahead_margin": "09:00:00"
        , "in_above_margin": "10:00:00"
        , "out_time": "18:30:00"
        , "out_ahead_margin": "17:00:00"
        , "out_above_margin": "19:00:00"
        , "work_day": "1"
        , "early_in": "1"
        , "min_early_in": "60"
        , "late_out": "1"
        , "min_late_out": "20"
        , "in_required": "1"
        , "out_required": "1"
        , "allow_late": "0"
        , "allow_leave_early": "0"
      }]
    };
    var flxible_timetable = {
      elem: '#demo'
      , cols: [[
        {field: 'no', width: '5%', title: ''}
        , {field: 'alias', width: '10%', title: 'A'}
        , {field: 'in_time', width: '10%', title: 'B'}
        , {field: 'out_time', width: '10%', title: 'C'}
        , {field: 'work_time_duration', width: '10%', title: 'D'}
        , {field: 'work_day', width: '5%', title: 'E'}
        , {field: 'work_type', width: '5%', title: 'F'}
        , {field: 'late_out', width: '10%', title: 'G'}
        , {field: 'min_late_out', width: '10%', title: 'H'}
        , {field: 'in_required', width: '10%', title: 'I'}
        , {field: 'out_required', width: '10%', title: 'J'}
        , {field: 'multiple_punch', width: '5%', title: 'K'}
      ]]
      , data: [{
        "no": "1"
        , "alias": "{% trans 'timeInterval_field_alias' %}"
        , "in_time": "{% trans 'timeInterval_field_checkIn' %}"
        , "out_time": "{% trans 'timeInterval_field_checkOut' %}"
        , "work_time_duration": "{% trans 'timeInterval_field_workTimeDuration' %}"
        , "work_day": "{% trans 'timeInterval_field_paidDay' %}"
        , "work_type": "{% trans 'timeInterval_field_workType' %}"
        , "late_out": "{% trans 'timeInterval_field_lateOut' %}"
        , "min_late_out": "{% trans 'timeInterval_field_minLateOut' %}"
        , "in_required": "{% trans 'timeInterval_field_inRequired' %}"
        , "out_required": "{% trans 'timeInterval_field_outRequired' %}"
        , "multiple_punch": "{% trans 'timeInterval_field_useMultiplePunch' %}"
      }, {
        "no": "2"
       , "alias": "CDMX Flexible timetable 1"
        , "in_time": "09:00:00"
        , "out_time": "18:00:00"
        , "work_time_duration":600
        , "work_day": "1"
        , "work_type": "1"
        , "late_out": "1"
        , "min_late_out": "20"
        , "in_required": "1"
        , "out_required": "1"
        , "multiple_punch": "1"
      }, {
        "no": "3"
        , "alias": "CDMX Flexible timetable 1"
        , "in_time": "09:00:00"
        , "out_time": "12:00:00"
        , "work_time_duration":180
        , "work_day": "0.5"
        , "work_type": "1"
        , "late_out": "1"
        , "min_late_out": "20"
        , "in_required": "1"
        , "out_required": "1"
        , "multiple_punch": "1"
      }]
    };
    var _url = 'att/timeinterval/import_template/';
    table.render(normal_timetable);
     $('#description_for_flexible').hide();
    form.on('select(change_import_type)', function (data) {
        if (data.value == 0) {
            $('#description_for_normal').show();
            $('#description_for_flexible').hide();
           table.render(normal_timetable);
           $('#timetable_import_link')[0].href = _url+'?import_type=normal_timetable';
        }else{
            $('#description_for_normal').hide();
            $('#description_for_flexible').show();
            table.render(flxible_timetable);
            $('#timetable_import_link')[0].href = _url+'?import_type=flexible_timetable';
        }
        form.render();
    });
  });
</script>